<template>
    <div class="Parentbox">
        <div>
            <div class="bovin">
                <div class="acknowledgment">
                    <div style="width: 454px; height: 72px;display: flex; justify-content: center; align-items: center; ">
                        <i class=" el-icon-takeaway-box"></i>
                        <!-- 字体图标 -->
                        <span style="margin-left: 15px;">确认订单信息</span>
                    </div>
                    <div style="display: flex;justify-content: center;  width: 590px; height: 70px;">
                        <!-- 步骤条 -->
                        <Stepp />
                        <div>

                        </div>

                    </div>
                </div>
                <div style="width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center;">
                    <el-card style="width: 1260px; height: 294px; margin-top: 15px;">
                        <h3>商品清单</h3>
                        <div
                            style="width: 1207px; height: 55px; border: 1px solid #eaecf2; display: flex; align-items: center;">
                            <i class="el-icon-s-shop"></i>
                            <span>{{ database[0].site }}</span>
                        </div>
                        <div class="product">
                            <div>产品种类</div>
                            <div>产品属性</div>
                            <div>申请期限</div>
                            <div>申请金额</div>
                        </div>
                        <div class="content">
                            <div>{{ database[0].freight }}</div>
                            <div style="transform: translate(-60px,0)">{{ database[0].finance }}</div>
                            <div style="transform: translate(-118px,0)">{{ database[0].deadline }}</div>
                            <div style="transform: translate(-30px,0)">{{ database[0].sum }} </div>
                        </div>
                    </el-card>
                    <el-card style="width: 1260px; height: 330px; margin-top: 15px;">
                        <h3>订单备注</h3>
                        <div>
                            订单备注
                            <el-input style="width: 90%; margin-left: 10px;" type="text" placeholder="限制45个字 (请将购买需求在备注中说明)"
                                maxlength="45" show-word-limit>
                            </el-input>
                        </div>
                        <div style="margin-top: 15px;">
                            <div style="display: flex;">
                                <div style="margin-right: 13px;">附件上传</div>
                                <span style="font-size: 13px; color: #edbda4; margin-top: 2px;">
                                    目前只支持jpeg,png,jpg格式文件</span>
                            </div>
                            <div style="transform: translate(79px,8px);">
                                <!-- 上传组件 -->
                                <el-upload action="#" list-type="picture-card" :before-upload="beforeAvatarUpload"
                                    ref="upload">
                                    <el-button type="text" @click="submitUpload">
                                        <i class="el-icon-plus"></i>
                                    </el-button>
                                </el-upload>
                            </div>
                        </div>
                    </el-card>
                    <el-card style="width: 1260px; height: 170px; margin-top: 15px;">
                        <div style="transform: translate(740px,0);">
                            <el-form>
                                <el-form-item label="联系人 ：" prop="pass" style="transform: translate(8px,0);">
                                    <el-input style="width: 120px;" type=" password" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="联系电话 ：" prop="pass" style="transform: translate(240px,-62px);">
                                    <el-input style="   width: 120px; " type="password" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                        <el-row type="flex" justify="end">
                            <el-col style="transform: translate(1090px,-40px);">
                                <el-button @click="$router.push('/ordercenter')" type="primary">申请提交</el-button>
                            </el-col>
                        </el-row>
                    </el-card>
                </div>
            </div>
            <!-- 底部 -->
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
import Stepp from "./components/step.vue"
export default {
    components: {
        Stepp
    },
    data() {
        return {
            database: {},
            active: 0,
            dialogImageUrl: '',
            dialogVisible: false
        }
    },
    computed: {
        ...mapState({ list: state => state.list })
    },
    created() {
        this.data()
    },
    methods: {
        data() {
            this.database = { ...this.list }
            // console.log(this.database, "数据");
        },
        submitUpload() {
            console.log(this.$refs.upload);
            // this.$refs.upload.submit();
            // console.log(this.$refs.upload.submit(), '123');
        },
        next() {
            if (this.active++ > 2) this.active = 0;
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === "image/jpg";
            const isPng = file.type === "image/png";
            const isJpeg = file.type === "image/jpeg";
            console.log(file.type, '上传文件的格式');
            if (!isJPG && !isPng && !isJpeg) {
                this.$message.error("上传文件只能是 png,jpg,jpeg 格式!");
                return false
            }

        }
    }
}
</script>

<style lang="less" scoped>
.bovin {
    height: 1050px;
    background-color: #f7f8fa;

    .leave {
        margin-bottom: 0px;
    }

    .acknowledgment {
        position: relative;
        width: 100%;
        height: 72px;
        display: flex;
        justify-content: space-between;
        background-color: #ffffff;


        .bar {
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border-radius: 50%;
            color: #fff;
            background-color: #409eff;
            transform: translateX(313px) translateY(-58px);
        }

        .Stepbar {
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border-radius: 50%;
            color: #fff;
            background-color: #409eff;
        }

        .dotted {
            width: 150px;
            height: 10px;
            transform: translateX(146px) translateY(-38px);
            background: radial-gradient(#d9d9d9, #d9d9d9 4px, transparent 4px, transparent);
            background-size: 15px 100%;
        }
    }

    .product {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 1207px;
        height: 35px;
        border: 1px solid #eaecf2;
        border-top: none;
    }

    .content {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 1207px;
        height: 85px;
        border: 1px solid #eaecf2;
        border-top: none;
    }
}

/deep/.el-card.is-always-shadow {
    box-shadow: none
}

/deep/.el-card {
    border: none
}

/deep/.el-input__inner {
    height: 28px;
    // border-radius: 0px;
}
</style>